<template>
  <div>
    <v-toolbar dense elevation="2">
      <div>
        <v-btn icon @click="$router.go(-1)">
          <v-icon small>mdi-arrow-expand-left</v-icon>
        </v-btn>
      </div>
      <div>
        我的信息
      </div>
      <v-spacer/>
    </v-toolbar>
    <v-main>
      <div>
        <v-simple-table>
          <tbody>
          <tr>
            <td>用户名</td>
            <td>
              <v-text-field dense solo hide-details v-model="loginCustomer.nickName"></v-text-field>
            </td>
          </tr>
          <tr>
            <td>姓名</td>
            <td>
              <v-text-field dense solo hide-details v-model="loginCustomer.name" :disabled="true"></v-text-field>
            </td>
          </tr>
          <tr>
            <td>手机号</td>
            <td>
              <v-text-field dense solo hide-details v-model="loginCustomer.phone" :disabled="true"></v-text-field>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <v-text-field dense solo hide-details v-model="customerForm.password"></v-text-field>
            </td>
          </tr>
          <tr>
            <td>确认密码</td>
            <td>
              <v-text-field dense solo hide-details v-model="customerForm.checkPassword"></v-text-field>
            </td>
          </tr>
          </tbody>
        </v-simple-table>
        <v-btn block color="success" @click="handleUpdateCustomer">修改信息</v-btn>
      </div>
    </v-main>
  </div>
</template>

<script>
import {updateCustomer} from "@/http/api/customer";

export default {
  name: "MyInfo",
  data:()=>({
    customerForm:{}
  }),
  computed:{
    loginCustomer(){
      return this.$store.state.customer
    }
  },
  methods:{
    handleUpdateCustomer(){
      this.customerForm.id = this.loginCustomer.id;
      this.customerForm.nickName = this.loginCustomer.nickName;
      if (!this.customerForm.nickName || this.customerForm.nickName.trim() === ''){
        this.$breadstick.notify("用户名不能为空");
        return;
      }
      if (this.customerForm.password != this.customerForm.checkPassword){
        this.$breadstick.notify("两次输入的密码不一致");
        return;
      }
      if (this.customerForm.password!=null){
        this.customerForm.password = this.customerForm.password.trim()
      }
      if (this.customerForm.password==''){
        this.customerForm.password = null
      }
      updateCustomer(this.customerForm).then(res=>{
        this.$breadstick.notify(res.data)
      })
    }
  }
}
</script>

<style scoped>

</style>